<template>
  <div class="DataBoard_container main_container">
    <div class="main_headers">
      <div class="title">生产信息化大屏</div>
      <div style="width:800px">
        <!-- <NoticeText :sends-val="textData" /> -->
      </div>
      <div class="data">
        <div style="width:210px;">{{ nowDate }}</div>
        <div>{{ '周' + '日一二三四五六'.charAt(new Date().getDay()) }}</div>
      </div>
    </div>
    <div class="showItem">
      <div class="item_info line">
        <div>
          <div class="item_header ">
            <div class="header_info">
              <div class="info_name">今日待完成任务单</div>
              <div class="info_number">{{ todoProductTaskSum }}</div>
            </div>
            <div class="header_info">
              <div class="info_name">未完成生产任务单</div>
              <div class="info_number">{{ unFinishProductTaskSum }}</div>
            </div>
            <div class="header_info">
              <div class="info_name">待出库领料单</div>
              <div class="info_number">{{ toOutSum }}</div>
            </div>
            <div class="header_info">
              <div class="info_name">未完成计划生产单</div>
              <div class="info_number">{{ unFinishPlanProductSum }}</div>
            </div>
          </div>
        </div>
        <div class="charts">
          <div class="charts_item">
            <unFinishProductTask />
          </div>
          <div class="charts_item">
            <productStartWork />
          </div>
        </div>
      </div>
      <div class="item_info">
        <div>
          <div class="item_header ">
            <div class="header_info">
              <div class="info_name">来料待检验单</div>
              <div class="info_number">{{ qualitySuppliedMaterialCheckServiceTodoSum }}</div>
            </div>
            <div class="header_info">
              <div class="info_name">外协待检验单</div>
              <div class="info_number">{{ qualityOutsourceInspectionCheckServiceTodoSum }}</div>
            </div>
            <div class="header_info">
              <div class="info_name">首检待检验单</div>
              <div class="info_number">{{ qualityFirstItemInspectionCheckServiceTodoSum }}</div>
            </div>
            <div class="header_info">
              <div class="info_name">今日巡检不合格率</div>
              <div class="info_number">{{ disQualifiedProbability }}%</div>
            </div>
            <div class="header_info">
              <div class="info_name">不良品待处置单</div>
              <div class="info_number">{{ qualityDisqualificationDisposeServiceTodoSum }}</div>
            </div>
          </div>
        </div>
        <div class="charts">
          <div class="charts_item">
            <disQualifiedProbability />
          </div>
          <div class="charts_item">
            <qualitySuppliedMaterialCheck />
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { deviceHeadDate } from '@/api/equipmentManage/equipmentReport/dataBoard' // 接口
import { getInfoByCode } from '@/api/system/largeScreenDetail' // 接口
import { temperature } from '@/api/system/largeScreen'
import Setup from './components/Setup'
import { getPageSettings } from '@/api/common/common'
import { mapGetters } from 'vuex'
import moment from 'moment'
import { reportInfo, qualityReportInfo } from '@/api/ProductionManagement/largeProductionScreen'
import productStartWork from './components2/productStartWork.vue'
import unFinishProductTask from './components2/unFinishProductTask.vue'
import disQualifiedProbability from './components2/disQualifiedProbability.vue'
import qualitySuppliedMaterialCheck from './components2/qualitySuppliedMaterialCheck.vue'
export default {
  name: 'DataBoard',
  components: {
    productStartWork,
    unFinishProductTask,
    disQualifiedProbability,
    qualitySuppliedMaterialCheck
  }, // 组件注册
  computed: {
    ...mapGetters(['userId'])
  },
  data() {
    return {
      textData: [
        {
          name: '张三4',
          detail:
            '信息公告：2020年8月31有限公司成立，我行用信金额444444元'
        }
      ],
      unFinishPlanProductSum: '',
      toOutSum: '',
      todoProductTaskSum: '',
      unFinishProductTaskSum: '',
      unFinishProductTask: [],
      productStartWorkList: [],
      disQualifiedProbability: '',
      qualityDisqualificationDisposeServiceTodoSum: '',
      qualityFirstItemInspectionCheckServiceTodoSum: '',
      qualityOutsourceInspectionCheckServiceTodoSum: '',
      qualitySuppliedMaterialCheckServiceTodoSum: '',
      disQualifiedProbabilityList: [],
      qualitySuppliedMaterialCheckListVos: [],
      temperature: '',
      timer: undefined,
      humidity: '',
      id: '',
      nowDate: '',
      name: '',
      OEENumber: 100,
      capacityNumber: 100,
      statisticsItem: [
        // 可选的统计数据项
        {
          name: '设备总数',
          icon: '设备总数',
          dataKey: 'deviceTotalNumber',
          bgColor: '#FF9292'
        },
        {
          name: '今日点检（含待点检）',
          icon: '今日待点检',
          dataKey: 'waitCheckNumber',
          bgColor: '#FFC9FB4D'
        },
        {
          name: '本月待保养',
          icon: '本月待保养',
          dataKey: 'waitMaintainNumber',
          bgColor: '#D3C9FF4D'
        },
        {
          name: '维修中设备数',
          icon: '维修中设备数',
          dataKey: 'repairNumber',
          bgColor: '#FFEBC94D'
        },
        {
          name: '安全库存报警',
          icon: '安全库存报警',
          dataKey: 'safetyStockAlarm',
          bgColor: '#C9FFE14D'
        },
        {
          name: '今日点检逾期数',
          icon: '今日点检超期数',
          dataKey: 'overdueCheckNumber',
          bgColor: '#C9EEFF4D'
        },
        {
          name: '备件待盘点工单',
          icon: '待盘点工单',
          dataKey: 'waitSpareCheckNumber',
          bgColor: '#B1FCFF4D'
        },
        {
          name: '维修工单',
          icon: '维修中工单',
          dataKey: 'repairRecordNumber',
          bgColor: '#F7FFC94D'
        }
      ],
      chartItem: [
        // 可选的图表项
        { name: '设备紧急程度分布', component: 'DegreeDistribution' },
        { name: '点检计划完成率', component: 'CheckPlanCompletedRatio' },
        { name: '维修费用统计', component: 'MaintenanceCostStatistics' },
        { name: '备件消耗排行', component: 'SparePartsConsumptionRanking' },
        { name: '设备位置分布', component: 'LocationDistribution' },
        { name: '保养计划及时率', component: 'MaintainPlanTimelinessRate' },
        // { name: '停机时间排行', component: 'MachineHaltDuration' },
        { name: '故障类型分布', component: 'RepairTypeDistribution' },
        { name: '任务统计', component: 'TaskStatistics', length: '2' }
      ],
      statisticsData: {},
      pageId: '设备数据看板',
      showStatisticsItem: [], // 真正展示的统计数据项
      showChartItem: [] // 真正展示的图表项
    }
  },
  mounted() {
    this.resetScale() // 重置缩放
    // this.getPageSettings()
    this.reportInfo()
    this.qualityReportInfo()
    this.getStatisticsData()
    this.timer = setInterval(() => {
      this.getStatisticsData()
    }, 10000)
    this.getTemperature()
    this.getInfoByCode(this.$route.query.code)
    setInterval(() => {
      this.nowDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    reportInfo() {
      reportInfo().then(res => {
        this.toOutSum = res.data.toOutSum
        this.todoProductTaskSum = res.data.todoProductTaskSum
        this.unFinishProductTaskSum = res.data.unFinishProductTaskSum
        this.unFinishPlanProductSum = res.data.unFinishPlanProductSum
        this.productStartWorkList = res.data.productStartWorkList
        this.unFinishProductTask = res.data.unFinishProductTask
      })
    },
    qualityReportInfo() {
      qualityReportInfo().then(res => {
        console.log(2222, res)
        this.disQualifiedProbability = res.data.disQualifiedProbability
        this.qualityDisqualificationDisposeServiceTodoSum = res.data.qualityDisqualificationDisposeServiceTodoSum
        this.qualityFirstItemInspectionCheckServiceTodoSum = res.data.qualityFirstItemInspectionCheckServiceTodoSum
        this.qualityOutsourceInspectionCheckServiceTodoSum = res.data.qualityOutsourceInspectionCheckServiceTodoSum
        this.qualitySuppliedMaterialCheckServiceTodoSum = res.data.qualitySuppliedMaterialCheckServiceTodoSum
        this.disQualifiedProbabilityList = res.data.disQualifiedProbabilityList
        this.qualitySuppliedMaterialCheckListVos = res.data.qualitySuppliedMaterialCheckListVos
      })
    },
    resetScale() {
      const scaleX = document.documentElement.clientWidth / 1920
      const scaleY = document.documentElement.clientHeight / 1080

      document.getElementsByTagName('body')[0].style.transform = 'scale(' + scaleX + ', ' + scaleY + ')'
      document.getElementsByTagName('body')[0].style.transformOrigin = 'left top'
      document.getElementsByTagName('body')[0].style.marginRight = -(1920 * (1 - scaleX)) + 'px'
      document.getElementsByTagName('body')[0].style.marginBottom = -(1080 * (1 - scaleY)) + 'px'

      document.getElementsByTagName('body')[0].style.width = 'auto'
      document.getElementsByTagName('body')[0].style.height = 'auto'
    },
    // 获取顶部统计数据
    getStatisticsData() {
      deviceHeadDate().then((res) => {
        this.statisticsData = res.data
      })
    },
    getTemperature() {
      temperature({ companyId: this.$store.state.user.companyId }).then(res => {
        this.humidity = res.data.humidity
        this.temperature = res.data.temperature
      })
    },
    getInfoByCode(code) {
      getInfoByCode(code).then(res => {
        this.showStatisticsItem = JSON.parse(res.data.statistical)
        this.showChartItem = JSON.parse(res.data.chart)
        this.OEENumber = Number(this.showChartItem.filter(item => item.component == 'OEESequenceDiagram')[0].number)
        this.capacityNumber = Number(this.showChartItem.filter(item => item.component == 'CapacityStatistics')[0].number)
        this.name = res.data.name
        this.$store.state.common.refreshFrequency = res.data.refreshFrequency
        console.log(this.showChartItem)
      })
    },
    // 设置
    setup() {
      this.$layer.iframe({
        // 弹框
        content: {
          content: Setup, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            settingData: {
              StatisticsItem: this.showStatisticsItem, // 显示设置的数据
              ChartItem: this.showChartItem, // 字段搜索的数据
              id: this.id,
              pageId: this.pageId // 页面唯一标识
            }
          } // props
        },
        area: ['660px', '800px'],
        title: '看板设置', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    getPageSettings() {
      getPageSettings({ userId: this.userId, pageId: this.pageId }).then(
        (res) => {
          if (res.data.json) {
            const pageSetings = res.data.json

            this.showStatisticsItem = pageSetings.StatisticsItem
            this.showChartItem = pageSetings.ChartItem

            this.id = res.data.id
          } else {
            this.showStatisticsItem = this.$deepClone(this.statisticsItem)
            this.showChartItem = this.$deepClone(this.chartItem)
          }
        }
      )
      console.log(this.showStatisticsItem)
      console.log(this.showChartItem)
    }
  }
}
</script>

<style lang="less" scoped>
.charts_item{
  height: 320px;
  box-shadow: 0px 4px 10px 0px rgba(43, 98, 203, 0.24);
  border-radius:8px ;
  margin: 5px 15px 10px 15px;
}
.showItem{
  display: flex;
  flex-direction: row;
  // align-items: center;
  justify-content: flex-start;
  padding:0 30px;
  width: 100%;
  .item_info{
    flex: 1;
    .item_header{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .header_info{
        width: 30%;
        text-align: center;
        display: flex;
        flex-direction: column;
        padding: 30px 20px;
        box-shadow: 0px 4px 10px 0px rgba(43, 98, 203, 0.24);
        background: white;
        justify-content: space-around;
        margin:15px;
        border-radius: 10px;
        .info_name{
          margin-bottom: 20px;
          font-size: 20px;
        }
        .info_number{
          font-size: 26px;
          color: rgb(98,189,222);
        }
      }
    }
  }
}
.line{
border-right: 20px solid white;
}
.DataBoard_container {
  //box-shadow: inset 0px 0px 12px 0px rgba(29, 65, 134, 0.18);
  background-color: #f7f8fa;
  //background-color: #5a5e66;
  overflow-y: auto;
  .main_headers {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 13px 30px;
    .title {
      font-family: AlibabaPuHuiTi_2_95_ExtraBold;
      font-size: 24px;
      font-weight: 800;
      color: #333333;
      max-width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .data {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 20px;
      font-weight: normal;
      color: #666666;
    }
  }
  .right_setting {
    font-size: 20px;
  }
  .DataBoard_container_main {
    padding: 10px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: space-between;
  }

  .DataBoard_container_main_statistics {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    .statistics_item {
      width: 223px;
      height: 100px;
      border-radius: 10px;
      margin-right: 20px;
      margin-bottom: 20px;
      .statistics_item_background1 {
        width: 100%;
        height: 30px;
      }
      .statistics_item_background {
        width: 100%;
        height: 80px;
        background: #FFFFFF;
        border-radius: 10px;
        box-shadow: 0px 4px 10px 0px rgba(43, 98, 203, 0.24);
      }
      .statistics_item_icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: rgba(255, 201, 201, 1);
        float: left;
        left: 20px;
        position: relative;
        font-size: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .statistics_item_number {
        float: right;
        right: 20px;
        position: relative;
        color: rgba(51, 51, 51, 1);
        font-size: 50px;
        height: 60px;
        line-height: 60px;
      }
      .statistics_item_name {
        float: right;
        right: 20px;
        position: relative;
        color: rgba(153, 153, 153, 1);
        font-size: 18px;
        top: -35px;
      }
    }

    .statistics_item:first-child {
      margin-left: 0px;
    }
  }

  .DataBoard_container_main_charts {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .charts_item {
      width: calc(50% - 12px);
      background-color: white;
      height: 300px;
      margin-top: 20px;
      border-radius: 4px;
      box-shadow: 0px 4px 10px 0px rgba(43, 98, 203, 0.24);
    }
    .charts_item.double {
      width: 100%;
    }
  }
}
</style>
